<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
        <el-table  border :data="gridData" style="width:100%">
          <el-table-column property="created_at" label="日期" width="250"></el-table-column>
          <el-table-column property="msg" label="内容"></el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
<template scope="scope">
	<el-button type="text" @click="handleClick(scope.row)" size="small" :disabled="scope.row.status!=0">
		{{scope.row.status!=0?'已读':'标为已读'}}</el-button>
</template>
    </el-table-column>
        </el-table>
         <div class="Pagination" style="text-align: left;margin-top: 10px;margin-left:20px">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="50" layout="total, prev, pager, next" :total="count">
        </el-pagination>
      </div>
      </div>
    </div>
</template>

<script>
import headTop from "../components/headTop";
import { getMessage, readMessage } from "@/api/getData";
export default {
  data() {
    return {
      gridData: [],
      currentPage: 1,
      count: 0
    };
  },
  created() {
    this.$bus.on("refresh-message", this.refreshInfo);
  },
  beforeDestroy() {
    this.$bus.off("refresh-message", () => console.log("unregister"));
  },
  components: {
    headTop
  },
  mounted() {
    this.getMessageInfo();
  },
  methods: {
    refreshInfo() {
      this.getMessageInfo();
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getMessageInfo();
    },
    async handleClick(row) {
      let readId = {};
      readId.msg_id = row.id;
      const res = await readMessage(readId);
      if (res.resCode == 0) {
        this.$message({
          type: "success",
          message: "消息已读"
        });
        this.getMessageInfo();
      }
    },
    async getMessageInfo() {
      const res = await getMessage(this.currentPage);
      if (res.resCode == 0 && !!res.data.data && res.data.data.length > 0) {
        this.gridData = res.data.data;
        this.count = res.data.count;
      }
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
.explain_text {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  color: #333;
}
.table_container {
  padding: 20px;
}
</style>
